import React, { useRef } from 'react';
import { MediaItem } from '../types';
import { message } from 'antd'; 

interface FileUploaderProps {
    type: 'image' | 'video' | 'music';
    onUpload: (file: MediaItem) => void;
    uploadedFiles: MediaItem[]; 
}

const FileUploader: React.FC<FileUploaderProps> = ({ type, onUpload, uploadedFiles = [] }) => {
    const fileInputRef = useRef<HTMLInputElement | null>(null);
    const acceptType = type === 'image' ? 'image/*' : type === 'video' ? 'video/*' : 'audio/*';

    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const files = event.target.files; 
        if (files) {
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (file.type.startsWith(acceptType.split('/')[0])) {
                    const newFile: MediaItem = {
                        id: Date.now().toString(),
                        name: file.name,
                        url: URL.createObjectURL(file),
                        size: file.size,
                        type: file.type,
                    };
                    onUpload(newFile);
                    message.success(`${file.name} 上传成功！`); // 添加上传成功提示
                }
            }
            if (fileInputRef.current) {
                fileInputRef.current.value = '';
            }
        }
    };

    const triggerFileInput = () => {
        if (fileInputRef.current) {
            fileInputRef.current.click();
        }
    };

    return (
        <div style={{
            float: 'right', width: '31%', height: '90%',
            border: 'solid 2px #f0f0f0', marginRight: '1%', marginTop: '2%',
            borderRadius: '5px', padding: '10px', boxSizing: 'border-box'
        }}>
            <h3>{type === 'image' ? '上传图片' : type === 'video' ? '上传视频' : '上传音乐'}</h3>
            <input
                type="file"
                ref={fileInputRef}
                onChange={handleFileChange}
                style={{ display: 'none' }}
                accept={acceptType}
                multiple
            />
            <button style={{ width: '100px', height: '35px', border: '0', borderRadius: '5px', backgroundColor: 'blue', color: '#fff' }} onClick={triggerFileInput}>本地上传</button>


        </div>
    );
};

export default FileUploader;


{/* <div style={{ marginTop: '10px' }}>
                {type === 'image' && uploadedFiles.map(item => (
                    <img key={item.id} src={item.url} alt={item.name} width="100" />
                ))}
                {type === 'video' && uploadedFiles.map(item => (
                    <video key={item.id} width="100" controls>
                        <source src={item.url} type={item.type} />
                    </video>
                ))}
                {type === 'music' && uploadedFiles.map(item => (
                    <audio key={item.id} controls>
                        <source src={item.url} type={item.type} />
                    </audio>
                ))}
            </div> */}